<!DOCTYPE html>

<html>

<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<title>首页</title>
	<link rel="stylesheet" href="../lib/layui/css/layui.css">
	<link rel="stylesheet" href="../styles/css/index.css">
	<style>
		.w0_logo {
			width: 200px;
			height: 60px;
			line-height: 60px;
			text-align: center;
			background-color: #20222A !important;
			color: #ffffff;
		}

		#menuWrap a {
			padding: 5px 40px;
			position: relative;
		}

		#menuWrap a i {
			position: absolute;
			left: 8%;
		}

		#menuControlBtn {
			position: relative;
			left: 20px;
			top: 20px;
		}

		#dropList {
			position: relative;
			left: 40px;
			top: 20px;
		}

		.layui-layout .layui-bg-white {
			background-color: #fff;
		}

		.layui-layout-admin .layui-logo {
			background-color: #20222A !important;
		}

		.layui-layout-admin .layui-side {
			top: 0;
		}

		#mc {
			float: left;
			overflow: inherit;
		}

		.w0_relative {
			position: relative;
			width: 100%;
			height: 100%;
		}

		#content {
			min-width: 800px;
			position: absolute;
			top: 60px;
			left: 0;
			right: 0;
			bottom: 0;
		}

		#dropDown {
			width: 40px;
			height: 60px;
			background: green;
			position: absolute;
			top: 50%;
			margin-top: -60px;
			right: -40px;
		}

		.layui-header {
			border-bottom: 1px solid #cccccc;
		}

		.layui-nav .navlist {
			display: none;
		}

		.layui-nav .navlist:first-child {
			display: block;
		}
		.navhead .layui-nav-item a {
			font-size: 18px;
			font-weight: bold;
		}
		#menuWrap>li>dl>dd>dl>dd>a{
			background: #3a3f51;
			padding-left: 55px;
		}
        .layui-nav-tree .layui-nav-child dd.layui-this, .layui-nav-tree .layui-nav-child dd.layui-this a, .layui-nav-tree .layui-this, .layui-nav-tree .layui-this>a, .layui-nav-tree .layui-this>a:hover {
          background-color: #009688 !important;
          color: #fff;
        }
	</style>
</head>

<body class="layui-layout-body">
<div id="mc" class="layui-side layui-bg-black">
	<div class="w0_logo">叶龄智能诊断服务系统</div>
	<div class="layui-side-scroll">
		<!-- <a id="dropDown" href="###">下拉</a> -->
		<!-- 左侧导航区域（可配合layui已有的垂直导航） -->
		<ul id="menuWrap" class="layui-nav layui-nav-tree" lay-shrink="all" lay-filter="test">
			<li class="layui-nav-item layui-nav-itemed navlist">
				<dl class="layui-nav-child">
					<dd>
						<a target="iframe" >数据管理</a>
						<dl class="layui-nav-child">
							<dd>
								<a target="iframe" href="ncgl.html">农场管理</a>
							</dd>
						</dl>
						<dl class="layui-nav-child">
							<dd>
								<a target="iframe" href="jdgl.html">管理区管理</a>
							</dd>
						</dl>
						<dl class="layui-nav-child">
							<dd>
								<a target="iframe" href="dkgl.html">地块管理</a>
							</dd>
						</dl>
						<dl class="layui-nav-child">
							<dd>
								<a target="iframe" href="sjzd.html">数据字典</a>
							</dd>
						</dl>
						<dl class="layui-nav-child">
							<dd>
								<a target="iframe" href="cldr.html">产量导入</a>
							</dd>
						</dl>
					</dd>
					<dd>
						<a target="iframe" href="tjfx.html">统计分析</a>
					</dd>
					<dd>
						<a target="iframe" href="spsh.html">视频融合</a>
					</dd>
					<dd>
						<a target="iframe" href="sbgl.html">设备管理</a>
					</dd>
					<dd>
						<a target="iframe" href="tpbh.html">图片捕获</a>
					</dd>
					<dd>
						<a target="iframe" href="dtjz.html">动态加载</a>
					</dd>
					<dd>
						<a target="iframe" href="znsb.html">智能任务调度</a>
					</dd>
					<dd>
						<a target="iframe" href="jkjglist.html">监控警告</a>
						<dl class="layui-nav-child">
							<dd>
								<a target="iframe" href="jkjglist.html">告警信息</a>
							</dd>
						</dl>
						<dl class="layui-nav-child">
							<dd>
								<a target="iframe" href="jkjgl.html">告警管理</a>
							</dd>
						</dl>
					</dd>
					<dd>
						<a target="iframe" href="hjjc.html">环境监测</a>
					</dd>
					<dd>
						<a target="iframe" href="qxjk.html">气象监测</a>
					</dd>
					<dd>
						<a target="iframe" href="rzgl.html">日志管理</a>
					</dd>
					<dd>
						<a target="iframe" href="home.html">GIS地图</a>
					</dd>
				</dl>
			</li>
			<li class="layui-nav-item layui-nav-itemed navlist">
				<dl class="layui-nav-child">
					<dd>
						<a target="iframe">叶龄诊断</a>
						<dl class="layui-nav-child">
							<dd>
								<a target="iframe" href="dydk.html">单一地块</a>
							</dd>
						</dl>
						<dl class="layui-nav-child">
							<dd>
								<a target="iframe" href="sydk.html">所有地块</a>
							</dd>
						</dl>
						<dl class="layui-nav-child">
							<dd>
								<a target="iframe" href="showImg.html">图片展示</a>
							</dd>
						</dl>
					</dd>
					<dd>
						<a target="iframe" href="zyzsk.html">作业知识库</a>
					</dd>
					<!--<dd>
						<a target="iframe" href="jlfw.html">交流服务</a>
					</dd>-->
					<dd>
						<a target="iframe" href="zxzx.html">在线咨询</a>

					</dd>
				</dl>
			</li>
			<li class="layui-nav-item layui-nav-itemed navlist">
				<dl class="layui-nav-child">
					<dd>
						<a target="iframe" href="dkjc.html">单一地块监测</a>
					</dd>
					<dd>
						<a target="iframe" href="ztjc.html">整体地块监测</a>
					</dd>
				</dl>
			</li>
		</ul>
	</div>
</div>
<div id="layRight" class="layui-body">
	<div class="w0_relative">
		<ul id="Tree"
			style="position:fixed;top:83px;left:210px;padding:10px;height:400px;width:180px;overflow-y:auto;z-index: 999;border-radius:10px;box-shadow:1px 1px 8px #CCCCCC;background: #FFFFFF;display:none;">
		</ul>
		<div class="layui-layout layui-layout-admin">
			<div class="layui-header">
				<!-- <a id="dropList" href="###">
										<i class="scrolls layui-icon">&#xe625;</i>
									</a> -->
				<!-- 头部区域（可配合layui已有的水平导航） -->
				<ul class="layui-nav layui-layout-left navhead">
					<li class="layui-nav-item "><a>综合管理</a></li>
					<li class="layui-nav-item"><a>叶龄服务</a></li>
					<li class="layui-nav-item"><a>实时监管</a></li>
				</ul>
				<ul class="layui-nav layui-layout-right">
					<li class="layui-nav-item">
						<a href="javascript:;">
							<img src="http://t.cn/RCzsdCq" class="layui-nav-img"> 地块
						</a>
						<dl class="layui-nav-child">
							<dd>
								<a href="">基本资料</a>
							</dd>
							<dd>
								<a href="">安全设置</a>
							</dd>
						</dl>
					</li>
					<li class="layui-nav-item">
						<a href="">退出</a>
					</li>
				</ul>
			</div>
		</div>
		<!-- 内容主体区域 -->
		<div id="content" style="padding: 15px;">
			<iframe name="iframe" width="100%" style="height: 100%" src="ncgl.html" scrolling="yes" frameborder="0"></iframe>
		</div>
	</div>
</div>

<!--<script lib="../lib/lay/modules/jquery.js"></script>-->
<script src="../lib/layui/layui.js"></script>
<script>
    //JavaScript代码区域
    layui.use(['jquery', 'element'], function () {
        var oMenu = {
            closeMenu: function () {
                /*document.getElementById("menuControlBtn").onclick = function () {
                    this.childNodes.innerHTML = "layui-icon-spread-left";
                }*/
            }
        }
        var $ = jQuery = layui.$;
        var element = layui.element;
        /*点击顶部导航切换右侧树*/
        $('.navhead li ').click(function () {
            $('.navlist').hide();
            $('.navlist').eq($(this).index()).show();
            console.log(12312321, $(this).index())
        })
        var oMenu = {
            closeMenu: function () {
                $("#menuControlBtn").children("i").on("click", function () {
                    if ($("#mc").width() > 40) {
                        $("#mc,.layui-logo,.w0_logo").animate({
                            "width": "40"
                        }, "slow"); //.width(40);
                        $("#layRight").animate({
                            "left": "40"
                        }, "slow");
                        $(".w0_logo").html("L");
                        $(this).html("&#xe66b;");
                        $("#menuWrap li").removeClass("layui-nav-itemed");
                    } else {
                        $("#mc,.layui-logo,.w0_logo").animate({
                            "width": "200"
                        }, "slow");
                        $("#layRight").animate({
                            "left": "200"
                        }, "slow");
                        $(".w0_logo").html("农场叶龄诊断平台");
                        $(this).html("&#xe668;");
                    }
                })
            },
            hoverMenu: function () {

            },
            oHeight: function () {
                var oh = document.documentElement.clientHeight || document.body.clientHeight;
                $(".layui-side-scroll").height(oh - 60)
            }
        }
        oMenu.closeMenu();
        oMenu.oHeight();
        //监听导航点击
        element.on('nav(test)', function (elem) {
            if ($("#mc").width() == 40) {
                $("#mc,.layui-logo,.w0_logo").animate({
                    "width": "200"
                }, "slow");
                $("#layRight").animate({
                    "left": "200"
                }, "slow");
                $(".w0_logo").html("农场叶龄诊断平台");
                $('#menuControlBtn').children('i').html("&#xe668;");
            }
        });
        $(".scrolls").on("click", function () {
            if ($("#Tree").css("display") == "none") {
                $(this).html("&#xe623;");
                $("#Tree").slideDown();
            } else {
                console.log($(this).html())
                $(this).html("&#xe625;");
                $("#Tree").slideUp();
            }

        });

    });
</script>
</body>

</html>